<template>
  <div class="container">
    <div class="form">
      <div class="formtitle">认证基本信息{{}}</div>
      <form-create :rule="formRules" :disabled="true" v-model="basicData" :option="{ submitBtn: false }" />
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="申请认证材料" name="shenqing"></el-tab-pane>
      <el-tab-pane label="参建单位名单" name="canjian"></el-tab-pane>
      <el-tab-pane label="认证暗访" name="anfang"></el-tab-pane>
      <el-tab-pane label="认证验收" name="yanshou"></el-tab-pane>
      <el-tab-pane label="认证流转记录" name="liuzhuan"></el-tab-pane>
    </el-tabs>
    <div v-if="activeName == 'shenqing'">
      <div class="box">
        <div>创建区域基本情况:</div>
        <div class="detail_content">
          {{ shenqingData.basicInformation }}
        </div>
      </div>
      <div class="box">
        <div>创建区域内诚信计量工作基本情况:</div>
        <div class="detail_content">
          {{ shenqingData.workSituation }}
        </div>
      </div>
      <div class="box">
        <div>创建工作计划:</div>
        <div class="detail_content">
          {{ shenqingData.workPlan }}
        </div>
      </div>
      <div class="box">
        <div>组织单位及职责分工:</div>
        <div class="detail_content">
          {{ shenqingData.responsibilities }}
        </div>
      </div>
    </div>
    <div v-if="activeName == 'canjian'">
      <FormTable :tableData="canjianTable.tableData" :columns="canjianTable.columns" :total="total"
        :currentPage="listQuery.pageNo" :pageSize="listQuery.pageSize" @changeTableData="changeTableData"
        @tableButtonClick="startSq" :hasPagination="false">
        <template #operator="{ slotProps }">
          <span class="table_button" @click="lookCompany(slotProps)">查看</span>
          <el-divider direction="vertical" />
          <span class="table_button" @click="editCompany(slotProps)">编辑</span>
          <el-divider direction="vertical" />
          <span class="table_button" @click="deleteCompany(slotProps)">删除</span>
        </template>
      </FormTable>
      <div class="addunit" @click="addUnit" v-if="basicData.activityId=='002906'">
        <el-icon>
          <Plus />
        </el-icon>添加单位
      </div>
    </div>
    <div v-if="activeName == 'anfang'">
      <FormTable :tableData="anfangTable.tableData" :columns="anfangTable.columns" :total="total"
        :currentPage="listQuery.pageNo" :pageSize="listQuery.pageSize" @changeTableData="changeTableData"
        @tableButtonClick="startSq">
        <template #operator="{ slotProps }">
          <span class="table_button" @click="anfang(slotProps)">暗访录入</span>
        </template>
      </FormTable>
    </div>
    <div v-if="activeName == 'yanshou'">
      <div></div>
      <FormTable :tableData="yanshouTable.tableData" :columns="yanshouTable.columns" :total="total"
        :currentPage="listQuery.pageNo" :pageSize="listQuery.pageSize" @changeTableData="changeTableData"
        @tableButtonClick="startSq">
        <template #operator="{ slotProps }">
          <span class="table_button" @click="yanshou(slotProps)">验收结果录入</span>
        </template>
      </FormTable>
    </div>
    <div v-if="activeName == 'liuzhuan'">
      <el-timeline style="margin-top: 12px;">
        <el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color"
          :hollow="activity.hollow" :timestamp="activity.timestamp">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog v-model="yanshouDialog" class="yanshou" title="验收结果录入" :before-close="handleClose">
      <el-form ref="ruleFormRef" :rules="diaRules" :model="yanshouForm" class="demo-form-inline"
        :disabled="dialogDisabled">
        <el-form-item label="01.上海市诚信计量示范社（街）区组织者考核评价表" prop="attachmentList">
            <file-upload v-model="yanshouForm.attachmentList" />
        </el-form-item>
        <el-form-item label="02.上海市诚信计量示范社（街）区组织者考核评价表（续）" prop="attachmentList">
          <el-col :span="16">
            <file-upload v-model="yanshouForm.attachmentList" />
          </el-col>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="yanshouDialog = false">取消</el-button>
          <el-button type="primary" @click="addExpertToList">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script name="list-two" setup>
import { useRoute, useRouter } from "vue-router";
import FormTable from "@/components/FormTable/index.vue";
import { Plus } from "@element-plus/icons-vue";
import { getList as getCompanyList, deleteUnit, editUnit } from '@/api/company'
import { belongDomain } from "@/utils/enum";
import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'
import { anfangList, queryYanshouList,saveCompleteWork } from '@/api/rzsq'
import  FileUpload  from "@/components/FileUpload/index.vue"
import { getMaterialByApplicationId, getOpinionList,getOpinion, getApplicationById,getEnterpriseById } from '@/api/rzsq'
const router = useRouter();
const route = useRoute();
let listQuery = ref({
  pageNo: 1,
  pageSize: 10,
});
let total = ref(0);
let applicationId = route.query.id


const activities = reactive([
  {
    content: "认证验收申请局审通过",
    timestamp: "2018-04-03 20:46",
    color: "#0bbd87",
  },
  {
    content: "认证验收申请已提交",
    timestamp: "2018-04-03 20:46",
    size: "large",
  },
  {
    content: "Custom hollow",
    timestamp: "2018-04-03 20:46",
    type: "primary",
    hollow: true,
  },
  {
    content: "Default node",
    timestamp: "2018-04-03 20:46",
  },
]);
let activeName = ref("shenqing");
activeName.value = route.query.tab;
let basicData = ref({})
let yanshouForm = reactive({})
const formRules = ref([
  {
    type: "input",
    field: "applicant",
    title: "申请单位",
    value: "",
  },
  {
    type: "datePicker",
    field: "applicantDate",
    title: "申请日期",
    value: "",
  },
  {
    type: "input",
    field: "applicantName",
    title: "申请单位名称",
    value: "",
  },
  {
    type: "input",
    field: "director",
    title: "负责人",
    value: "",
  },
  {
    type: "input",
    field: "address",
    title: "地址",
    value: "",
  },
  {
    type: "input",
    field: "postalCode",
    title: "邮编",
    value: "",
  },
  {
    type: "input",
    field: "contact",
    title: "联系人",
    value: "",
  },
  {
    type: "input",
    field: "contactNumber",
    title: "联系电话",
    value: "",
  },
  {
    type: "input",
    field: "mail",
    title: "电子邮件",
    value: "",
  },
  {
    type: "input",
    field: "fax",
    title: "传真",
    value: "",
  },
]);

onMounted(() => {
  applicationId = route.query.id
  queryShenqing()
  getApplicationByID()
  queryCanjian()
})
let shenqingData = ref({})
// 点击菜单处理事件
function handleTabClick() {
  if (activeName.value === 'anfang') {
    queryAnFang()
  }
  if (activeName.value === 'canjian') {
    queryCanjian()
  }
  if (activeName.value === 'yanshou') {
    queryYanshou()
  }
  if (activeName.value === 'liuzhuan') {
    queryAllProcess()
    queryProcess()
  }
}
// 流程下推
function saveWorkFlow(){
  // saveCompleteWork
}
function queryAllProcess() {
  let id = route.query.id
  let params = { flowUuid:'ff80818196c848c50196c8fdb0f90003' }
  getOpinionList(params).then((res) => {
    // anfangTable.tableData = res.data.list
  })
}
function queryProcess() {
  let id = route.query.id
  let params = { flowUuid:'ff80818196c848c50196c8fdb0f90003' }
  getOpinion(params).then((res) => {
    // anfangTable.tableData = res.data.list
  })
}
function queryAnFang() {
  let id = route.query.id
  let params = { "pageNum": 1, "pageSize": 100, "groups": [], "rules": [{ "field": "applicationId", "data": id, "opType": "Equals" }], "orderBys": [] }
  anfangList(params).then((res) => {
    anfangTable.tableData = res.data.list
  })
}
function queryYanshou() {
  let id = route.query.id
  let params = { "pageNum": 1, "pageSize": 100, "groups": [], "rules": [{ "field": "applicationId", "data": id, "opType": "Equals" }], "orderBys": [] }
  queryYanshouList(params).then((res) => {
    // yanshouTable.tableData = res.data.list
  })
}
function getApplicationByID() {
  getApplicationById({ id: applicationId }).then(res => {
    basicData.value = res.data
  })
}
function queryShenqing() {
  let id = route.query.id
  // 查询申请材料
  let params = { "pageNum": 1, "pageSize": 10, "groups": [], "rules": [{ "field": "applicationId", "data": id, "opType": "Equals" }], "orderBys": [] }
  getMaterialByApplicationId(params).then((res) => {
    shenqingData.value = res.data.list[0]
  })
  // let params1 = { "pageNum": 1, "pageSize": 10, "groups": [], "rules": [{ "field": "id", "data": id, "opType": "Equals" }], "orderBys": [] }
  // queryRzsqList(params1).then((res) => {
  //   shenqingData.value = res.data.list[0]
  // })
}
function queryCanjian() {
  let id = route.query.id
  let params = { "pageNum": 1, "pageSize": 100, "groups": [], "rules": [{ "field": "applicationId", "data": id, "opType": "Equals" }], "orderBys": [] }
  getCompanyList(params).then((res) => {
    canjianTable.tableData = res.data.list
  })
}
function addUnit() {
  router.push({ path: '/rzsq/addUnit', query: { applicationId } })
}
function lookCompany(props){
  router.push({ path: '/company/detail', query: { id:props.id } })
}
function editCompany(props) {
  editUnit(props).then((res) => {
    if (res.code == "0") {
      ElMessage({
        message: '编辑成功',
        type: 'success',
      })
    }
  })
}
function deleteCompany(props) {
  ElMessageBox.alert('确认删除？', '', {
    confirmButtonText: '确认',
    callback: (action) => {
      deleteUnit({ id: props.id }).then(res => {
        if (res.code == '0') {
          ElMessage({
            message: '删除成功',
            type: 'success',
          })
          queryCanjian()
        }
      })
    },
  })
}
const canjianTable = reactive({
  tableData: [],
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "单位名称",
      prop: "enterpriseName",
    },
    {
      label: "统一信用代码",
      prop: "unifiedCreditCode",
    },
    {
      label: "地址",
      prop: "address",
    },
    {
      label: "联系人",
      prop: "contact",
    },
    {
      label: "联系电话",
      prop: "telephone",
    },
    {
      label: "监管风险等级",
      prop: "superviseRiskLevel",
    },
    {
      label: "所属领域",
      prop: "belongDomain",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
      width: '160px'
    },
  ],
  totalRecordCount: 10,
});
const anfangTable = reactive({
  tableData: [],
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "单位名称",
      field: "name",
    },
    {
      label: "统一信用代码",
      field: "email",
    },
    {
      label: "地址",
      field: "email",
    },
    {
      label: "联系人",
      field: "email",
    },
    {
      label: "联系电话",
      field: "email",
    },
    {
      label: "监管风险等级",
      field: "email",
    },
    {
      label: "所属领域",
      field: "email",
    },
    {
      label: "暗访情况",
      field: "email",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email"
    },
  ],
  totalRecordCount: 10,
});
const yanshouTable = reactive({
  tableData: [{ id: 1 }, { id: 2 }],
  columns: [
    {
      label: "序号",
      type: "index",
      width: '70px'
    },
    {
      label: "单位名称",
      field: "name",
    },
    {
      label: "统一信用代码",
      field: "email",
    },
    {
      label: "地址",
      field: "email",
    },
    {
      label: "联系人",
      field: "email",
    },
    {
      label: "联系电话",
      field: "email",
    },
    {
      label: "监管风险等级",
      field: "email",
    },
    {
      label: "所属领域",
      field: "email",
    },
    {
      label: "暗访情况",
      field: "email",
    },
    {
      prop: 'operator',
      label: "操作",
      field: "email",
      width: '140px'
    },
  ],
  totalRecordCount: 10,
});
let yanshouDialog = ref(false)
const yanshou = () => {
  yanshouDialog.value = true
}
const anfang = (props) => {
  router.push({ path: "/rzsq/anfang/apply", query: { id: applicationId } })
}

</script>
<style lang="scss" scoped>
.container {
  background-color: white;
}

.formtitle {
  color: #4688f6;
  padding-bottom: 2px;
  border-bottom: 2px solid #4688f6;
}

.box {
  .detail_content {
    font-weight: 100;
    padding: 12px;
  }
}

::v-deep .fc-form-item {
  margin-top: 12px !important;
}

::v-deep .tablecustom {
  padding: 0;
}

.addunit {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  border: 1px solid gray;
  color: #4688f6;
  padding: 12px;
  border-radius: 5px;
  margin-top: -12px;
  width: 82vw;
  cursor: pointer;
}
.yanshou{
  ::v-deep.el-form-item{
    display: block !important;
  }
}
</style>
